<template>
  <div class="home page_inner">
    <!-- <el-row>
      <el-col :span="24">
        <div class="page_inner_top">
          <span class='page_inner_top_tit'>主页</span>
          <span class='page_inner_top_back'>返回</span>
        </div>
      </el-col>
    </el-row> -->
    <!-- <div style='border-bottom: 2px solid #f2f2f2;margin-top: 20px'></div> -->
    <div class="base_data" style="margin-top: 20px;">
      <div class="select_time">
        <el-date-picker
          style="width: 130px;"
          size:mini
          type="date"
          :editable="false"
          v-model="duibi_time"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="axios_date"
          placeholder="对比时段">
        </el-date-picker>
      </div>
      <div class="base_zb_tit">基本指标</div>
      <div style="float:right;margin-top:20px;margin-right:60px">
        <el-checkbox v-model="radio_base">不含内部</el-checkbox>
      </div>
      <div style="clear:both"></div>
      <div class="echart_tab">
        <el-row>
          <el-col :span="4"><div :class="['tab_ch',tab_or==1? 'tab_active' :'']" @click="tab_da(1)">
              <div class="tab_ch_tit">注册量</div>
              <div class="tab_ch_num">1306</div>
              <div class="tab_ch_p">+10%</div>
              <div :class="['tab_chs',tab_or==1? 'tab_actives' :'']"></div>
            </div></el-col>
          <el-col :span="4"><div :class="['tab_ch',tab_or==2? 'tab_active' :'']" @click="tab_da(2)">
              <div class="tab_ch_tit">实名量</div>
              <div class="tab_ch_num">478</div>
              <div class="tab_ch_p">+3%</div>
              <div :class="['tab_chs',tab_or==2? 'tab_actives' :'']"></div>
            </div></el-col>
          <el-col :span="4"><div :class="['tab_ch',tab_or==3? 'tab_active' :'']" @click="tab_da(3)">
              <div class="tab_ch_tit">发单量</div>
              <div class="tab_ch_num">1306</div>
              <div class="tab_ch_p">+10%</div>
              <div :class="['tab_chs',tab_or==3? 'tab_actives' :'']"></div>
            </div></el-col>
          <el-col :span="4"><div :class="['tab_ch',tab_or==4? 'tab_active' :'']" @click="tab_da(4)">
              <div class="tab_ch_tit">接单量</div>
              <div class="tab_ch_num">1306</div>
              <div class="tab_ch_p">+10%</div>
              <div :class="['tab_chs',tab_or==4? 'tab_actives' :'']"></div>
            </div></el-col>
          <el-col :span="4"><div :class="['tab_ch',tab_or==5? 'tab_active' :'']" @click="tab_da(5)">
              <div class="tab_ch_tit">交易量</div>
              <div class="tab_ch_num">1306</div>
              <div class="tab_ch_p">+10%</div>
              <div :class="['tab_chs',tab_or==5? 'tab_actives' :'']"></div>
            </div></el-col>
          <el-col :span="4"><div :class="['tab_ch',tab_or==6? 'tab_active' :'']" @click="tab_da(6)" style="border-right:0">
              <div class="tab_ch_tit">交易额</div>
              <div class="tab_ch_num">1306</div>
              <div class="tab_ch_p">+10%</div>
              <div :class="['tab_chs',tab_or==6? 'tab_actives' :'']"></div>
            </div></el-col>
        </el-row>

      </div>
      <div id="base_ech" class="base_cha">
      </div>
    </div>
    <div class="zhuye_bottom">
        <div class="zhuye_bottom_left zhuye_bottom_com">
          <div class="zhuye_bottom_tit">待审核数据</div>
          <ul style="margin-top: 30px;">
              <li class="zhuye_bottom_list">
                <span class="list_tit">待审核企业</span>
                <span class="list_num">(10)</span>
              </li>
              <li class="zhuye_bottom_list">
                <span class="list_tit">待审核零工</span>
                <span class="list_num">(10)</span>
              </li>
              <li class="zhuye_bottom_list">
                <span class="list_tit">待审核个人</span>
                <span class="list_num">(10)</span>
              </li>
              <li class="zhuye_bottom_list">
                <span class="list_tit">待审核服务</span>
                <span class="list_num">(10)</span>
              </li>

            </ul>
        </div>
        <div class="zhuye_bottom_right zhuye_bottom_com">
          <div class="zhuye_bottom_tit">渠道分析</div>
          <div id="zhuye_bottom_echar"></div>
        </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import axios from "axios"
export default {
  data() {
    return {
      radio_base:false,
      tab_or: 1,
      mid_leg: ['今天','昨天','7天前','30天前'],
      duibi_time: '',
      axios_dates:'',
      mid_datas: [
            {
                name:'今天',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 0, 0, 230, 210]
            },
            {
                name:'昨天',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'7天前',
                type:'line',
                stack: '总量',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'30天前',
                type:'line',
                stack: '总量',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
        ]


    }
  },
  methods: {
    tab_da(val) {
      this.tab_or = val;
      console.log(val)
    },
    axios_date(val) {
      if(val){
        this.axios_dates = val;
        this.mid_leg = this.mid_leg.slice(0,4);
        this.mid_leg.push(val);
        var data = {};
        data.name = val;
        data.type = "line";
        data.stack = '总量';
        data.data = [620, 632, 301, 834, 300, 230, 120];
        this.mid_datas = this.mid_datas.slice(0,4)
        this.mid_datas.push(data);
        this.mid_echar()
      }

    },
    mid_echar() {
      var _self = this;
      var Mid = echarts.init(document.getElementById('base_ech'));
      var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: _self.mid_leg,
            orient: 'horizontal',
            bottom: 1,
        },
        grid: {
            top: "13%",
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        // toolbox: {
        //   bottom: -7,
        //   right: "5%",
        //   show : true,
        //   feature : {
        //     mark : {show: true},
        //     dataView : {show: true, readOnly: false},
        //     magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
        //     restore : {show: true},
        //   }
        // },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00','03','06','09','12','15','18','21']
        },
        color:['#e168b1','#ffa182','#f9e7a8','#73e2e4'],
        yAxis: {
            type: 'value'
        },
        series: _self.mid_datas
      };
      Mid.setOption(option);
    },
    bottom_echar() {
      var Mid = echarts.init(document.getElementById('zhuye_bottom_echar'));
      var option = {

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient:'horizontal',
            bottom: 1,
            data:['小程序','ios','安卓']
        },
        color: ["#4ecb73","#3aa0ff","#5ad5d5"],
        // toolbox: {
        //     show : true,
        //     feature : {
        //         mark : {show: true},
        //         dataView : {show: true, readOnly: false},
        //         magicType : {
        //             show: true,
        //             type: ['pie', 'funnel'],
        //             option: {
        //                 funnel: {
        //                     x: '25%',
        //                     width: '50%',
        //                     funnelAlign: 'left',
        //                     max: 1548
        //                 }
        //             }
        //         },
        //         restore : {show: true},
        //         saveAsImage : {show: true}
        //     }
        // },
        calculable : true,
        series : [
            {
                name:'访问来源',
                type:'pie',

                radius : '60%',
                center: ['50%', '48%'],
                data:[
                    {value:335, name:'小程序'},
                    {value:310, name:'ios'},
                    {value:234, name:'安卓'},
                ]
            }
        ]
      };
      Mid.setOption(option);
    },
    get_follow_datas() {
      var _self = this
      axios.get('/cgi-bin/token?grant_type=client_credential&appid=wx568c16f48fed8e8d&secret=5e368d82ac33b620d3fe784a74ab989f',

      ).then(function(res) {
          console.log(res)

      }).catch((err) => {
          console.log(err)
      })
    },
  },
  watch: {
    radio_base(val) {
      console.log(val)
    }
  },
  mounted() {
      this.mid_echar();
      this.get_follow_datas();
      this.bottom_echar();
    }

}
</script>
<style lang="scss">
  .home {

    margin-bottom: 50px;
    .page_inner_top {
      margin-top: 30px;
      padding-left: 20px;
      text-align: left;
      font-size: 16px;
      color: #ccc;
      .page_inner_top_tit {
        box-sizing: border-box;
        border-left: 4px solid #409eff;
        padding-left: 20px;
      }
      .page_inner_top_back {
        float: right;
        font-family: PingFang-SC-Regular;
        font-size: 16px;
        color: #303133;
        margin-right: 30px;
        cursor: pointer;
      }
    }
    .base_data {
      height: 480px;
      background: #fff;
      position: relative;
      .base_zb_tit {
        float:left;
        margin-top: 20px;
        margin-left: 20px;
        font-family: PingFang-SC-Semibold;
        font-size: 18px;
        color: #303133;
      }
    }
    .select_time {
      position: absolute;
      bottom: 7px;
      right: 10%;
      z-index: 999;
      .el-date-editor {
        height: 30px;
        .el-input__inner {
          height: 30px;
          font-size: 12px;
        }
        .el-input__prefix {
            top: -4px;
        }
        .el-input__suffix {
          top: -4px;
          right: 5px;
        }
      }
    }
    .echart_tab {
      box-sizing: border-box;
      margin-top: 20px;
      padding-bottom: 20px;
      border-bottom: 4px solid #f2f2f2;


      .tab_ch {
        // height: 55px;
        box-sizing: border-box;
        border-right: 1px solid #f2f2f2;
        padding-top: 5px;
        position: relative;
        // border-bottom:4px solid #f2f2f2;
        border-left: 0;
        color: #aca9a9;
        cursor: pointer;
        .tab_ch_tit {
          text-align: left;
          color: #909399;
          // margin-top: 15px;
          margin-left:10%;
        }
        .tab_ch_num {
          display: inline-block;
          text-align: left;
          margin-top: 20px;
          font-size: 24px;
          font-weight: 600;
          margin-left: 8%;
          width: 45%;

        }
        .tab_ch_p {
          display: inline-block;
          width: 40%;
        }
      }
      .tab_ch:hover {
        .tab_ch_tit {
          color: #303133;
        }
        .tab_ch_num {
          color: #303133;
        }

      }
      .tab_active {

        // border-bottom: 5px solid #409eff;
        color: #333;
        // background: #f3efeb;
        .tab_ch_num {
          color: #333;
        }
        .tab_ch_p {
          color: red;
        }
      }
      .tab_active:hover {
        .tab_ch_tit {
          color: #909399;
        }
      }
      .tab_actives {
        position: absolute;
        width: 180px;
        border-bottom: 4px solid #409eff;
        left: 20px;
        bottom: -24px;
      }
    }
    #base_ech {
      height: 300px;
      width: 100%;
      margin-top: 10px;

    }
    .zhuye_bottom {
      margin-top: 20px;
      height: 420px;
      display: flex;
      justify-content: space-between;
      .zhuye_bottom_com {
        height: 420px;
        width: 49%;
        background: #fff;
        box-sizing: border-box;
        padding:20px 20px 10px 30px;
      }
      .zhuye_bottom_tit {
        text-align: left;
        font-family: PingFang-SC-Semibold;
        font-size: 18px;
        color: #303133;
      }
      .zhuye_bottom_list {
        line-height: 50px;
        list-style: none;
        height: 50px;
        border-bottom: 1px solid #d7d7d7;
        .list_tit {
          float:left;
          color: blue;
          cursor: pointer;
        }
        .list_num {
          float: right;
          margin-right: 20px;

        }

      }
      #zhuye_bottom_echar {
        height: 350px;

      }
    }
  }

</style>

